<template>
    <div class="container">
        <div class="logo">
            <img style="width: 100%;height: 100%;" src="~@/assets/img/logo.png" class="center" alt="">
        </div>

        <el-card shadow="never" id="channel">
            <el-tabs v-model="tab">
                <el-tab-pane label="通知公告" name="notice">
                    <div class="search-box">
                        <el-form :inline="true" :model="dataNoticeForm">
                            <el-form-item>
                                <el-input v-model="dataNoticeForm.title" placeholder="请输入标题" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getNoticeList()">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="notification-item" @click="notice(data.id)" v-for="(data,index) in listNotice"
                         :key="index" :class="{red:index<2}">
                        <div style="width:80%">
                            <span class="notification-title">{{data.title}}</span>
                        </div>
                        <span class="notification-time">发布时间：{{timestampToDate(data.pubDate)}}</span>
                    </div>
                    <el-pagination
                            :current-page="pageNotice"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="limitNotice"
                            :total="totalNotice"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="pageNoticeSizeChangeHandle"
                            @current-change="pageNoticeCurrentChangeHandle">
                    </el-pagination>
                </el-tab-pane>

                <el-tab-pane label="常见问答" name="question">
                    <div class="search-box">
                        <el-form :inline="true" :model="dataQuestionForm">
                            <el-form-item>
                                <el-input v-model="dataQuestionForm.title" placeholder="请输入问题" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getQuestionList()">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="question-item" @click="question(data.id)" v-for="(data,index) in listQuestion"
                         :key="index" :class="{green:index<2}">
                        <div>
                            <div class="question-item-title">
                                <span class="question-type">{{data.typeName}}</span>
                                <div class="question-title">{{data.title}}</div>
                            </div>
                            <div class="question-item-content">
                                {{data.title}}
                            </div>
                        </div>
                        <div class="question-item-time">问答时间：{{timestampToDate(data.pubDate)}}</div>
                    </div>

                    <el-pagination
                            :current-page="pageQuestion"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="limitQuestion"
                            :total="totalQuestion"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="pageQuestionSizeChangeHandle"
                            @current-change="pageQuestionCurrentChangeHandle">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>

        </el-card>
    </div>
</template>

<script>
  import Watermark from '@/utils/watermark'
  import {preventContextmenu} from '@/utils/common'

  export default {
    data () {
      return {
        tab: 'notice',
        pageNotice: 1,                    // 当前页码
        limitNotice: 10,                  // 每页数
        totalNotice: 0,                   // 总条数
        pageQuestion: 1,                  // 当前页码
        limitQuestion: 10,                // 每页数
        totalQuestion: 0,
        dataNoticeForm: {
          title: ''
        },
        dataQuestionForm: {
          title: ''
        },
        listNotice: [],
        listQuestion: [],
      }
    },
    methods: {
      question (id) {
        this.$router.push({ name: 'question', params: { id: id } })
      },
      notice (id) {
        this.$router.push({ name: 'notice', params: { id: id } })
      },

      // 获取公告列表
      getNoticeList () {
        return this.$http.get('/business/notice/page', {
          params: {
            page: this.pageNotice,
            limit: this.limitNotice,
            ...this.dataNoticeForm
          }
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.listNotice = res.data.list
          this.totalNotice = res.data.total
        }).catch(() => {
        })
      },

      // 获取问答列表
      getQuestionList () {
        return this.$http.get('/business/question/page', {
          params: {
            page: this.pageQuestion,
            limit: this.limitQuestion,
            ...this.dataQuestionForm
          }
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.listQuestion = res.data.list
          this.totalQuestion = res.data.total
        }).catch(() => {
        })
      },

      // 分页, 每页条数
      pageNoticeSizeChangeHandle (val) {
        this.pageNotice = 1
        this.limitNotice = val
        this.getNoticeList()
      },
      // 分页, 当前页
      pageNoticeCurrentChangeHandle (val) {
        this.pageNotice = val
        this.getNoticeList()
      },

      // 分页, 每页条数
      pageQuestionSizeChangeHandle (val) {
        this.pageQuestion = 1
        this.limitQuestion = val
        this.getQuestionList()
      },
      // 分页, 当前页
      pageQuestionCurrentChangeHandle (val) {
        this.pageQuestion = val
        this.getQuestionList()
      },

      //时间戳转为yyyy-MM-dd HH:mm:ss形式
      timestampToDate: function (cellValue) {
        if (cellValue) {
          var date = new Date(parseInt(cellValue) + 8 * 3600 * 1000)
          return date.toJSON().substr(0, 19).replace('T', ' ')
        }
      }

    },
    components: {},
    mounted: function () {
      let label = this.$route.params.label
      if(label){
        this.tab = label
      }


      let email = sessionStorage.getItem('email')
      Watermark.set('channel', email)
      // 禁用右键
      preventContextmenu('channel')
      this.getNoticeList()
      this.getQuestionList()
    }
  }
</script>
<style>
    body {
        font-size: 16px;
    }

    .container {
        padding: 0 50px 50px 50px;
    }

    .logo {
        width: 220px;
        height: 80px;
    }

    .notification-item {
        margin: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f1f1f1;
        padding: 5px;
        cursor: pointer;
    }

    .notification-time {
        width: 20%;
    }

    .question-item {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

    .question-item-title {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .question-title {
        margin-left: 10px;
    }

    .question-type {
        border-radius: 4px;
        padding: 5px;
        background-color: #0bb2d4;
        color: #ffffff;
    }

    .question-item-content {
        margin-top: 10px;
        color: #999;
        font-size: 14px;

    }

    .question-item-time {
        margin-left: 50px;
        width: 400px;
    }

    .el-tabs__item {
        font-size: 18px;
    }

    .red {
        color: red;
        font-weight: 500;
    }

    .green {
        color: #0bb2d4;
        font-weight: 400;
    }

</style>

